<template>
    <div class="app-container">
        <el-button @click="addClick" type="primary" size="small">添加</el-button>
        <el-table :data="tableData" border style="width: 100%;margin: 20px 0px;">
            <el-table-column label="产品主图" align="center">
                <template slot-scope="scope">
                    <!-- <img v-if="scope.row.coverImage" :src="scope.row.showpic" width="50" height="50" alt="/图片" @click="enlargeFun(scope.row.showpic)" style="cursor:pointer;"> -->
                    <img v-if="scope.row.coverImage" :src="scope.row.coverImage" width="50" height="50" alt="/图片" @click="enlargeFun(scope.row.coverImage)" style="cursor:pointer;">
                    <img v-else src="@/assets/image/default.png" width="50" height="50" alt="/图片">
                </template>
            </el-table-column>
            <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
            <el-table-column prop="code" label="产品编码" align="center"></el-table-column>
            <el-table-column prop="combined" :formatter="combinedFun" label="是否是组合产品" align="center"></el-table-column>
            <el-table-column prop="productCategoryId" label="所属分类" align="center">
                <template slot-scope="scope">
                    <el-tag v-for="(item,index) in scope.row.productCategoryEntityList" :key="index" size="mini" style="margin: 0px 3px;">{{item.name}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="purchasable" :formatter="purchasableFun" label="可购买状态" align="center"></el-table-column>
            <el-table-column prop="upDownStatus" :formatter="upDownStatusFun" label="上下架" align="center"></el-table-column>
            <el-table-column prop="sort" label="顺序值" align="center"></el-table-column>
            <el-table-column label="操作" align="center" width="180" fixed="right">
                <template slot-scope="scope">
                    <el-button @click.stop="editClick(scope.row)" type="primary" plain size="mini" style="margin-bottom: 5px;">编辑</el-button>
                    <el-button @click.stop="sortClick(scope.row)" plain size="mini" style="margin-bottom: 5px;">排序</el-button>
                    <el-button @click.stop="upDownClick(scope.row)" type="warning" plain size="mini" style="margin: 0px;">{{(scope.row.upDownStatus == 1) ? '下架':'上架'}}</el-button>
                    <el-button @click.stop="delClick(scope.row)" type="danger" plain size="mini">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination @current-change="getList" layout="total, prev, pager, next, jumper" :total="pageData.totalElements"></el-pagination>
        <!-- 弹框 -->
        <el-dialog :visible.sync="showDialog" width="800px">
            <el-form ref="dataForm" :rules="rules" :model="dataForm" label-position="left" label-width="100px" style="margin: 0px 50px;">
                <el-form-item label="排序：" prop="title">
                    <el-input v-model="dataForm.sort"></el-input>
                </el-form-item>
                <el-form-item style="text-align: center;">
                    <el-button @click="sortSubmit('dataForm')" type="primary">保存</el-button>
                    <el-button @click="cancelClick('dataForm')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 图片弹框 -->
        <el-dialog :visible.sync="showPicDialog" width="1000px">
            <img :src="nowPic" alt="" style="max-width: 100%;margin: 0 auto 15px;display: inherit" />
        </el-dialog>
    </div>
</template>
<script>
import { addProduct, findProduct, sortProduct, upDownProduct, editProduct, detailProduct, delProduct } from '@/api/product/product'
import { uploadPic, getPic } from '@/api/uploadPic'
export default {
    name: 'Product',
    data() {
        return{
            tableData: [],
            nowId: '',
            showDialog: false,
            dataForm: {
                sort: ''
            },
            rules: {
                sort: [
                    { required: true, message: '请输入', trigger: 'blur' }
                ]
            },
            searchForm: {
                upDownStatus: '',
                productCategoryId: '',
                combined: ''
            },
            nowPage: 0,
            pageSize: 10,
            pageData: {},
            showPicDialog: false,
            nowPic: '',
            productCategoryOpt: [],
            saleStatusOpt: [
                {label: '可购买', value: 1},
                {label: '不可购买', value: 0}
            ],
            upDownStatusOpt: [
                {label: '上架', value: 1},
                {label: '下架', value: 0}
            ],
        }
    },
    methods: {
        //默认函数
        init(){
            const _this = this;
            _this.tableData = [];
            //获取列表信息
            findProduct(this.nowPage, this.pageSize, this.searchForm.upDownStatus, this.searchForm.productCategoryId, this.searchForm.combined).then(response => {
                if(response.code == 200){
                    _this.pageData = response.object
                    _this.tableData = response.object.content
                    // for (const key in response.object.content) {
                    //     if(response.object.content[key].coverImage){
                    //         getPic(response.object.content[key].coverImage).then(res => {
                    //             if(res.code == 200){
                    //                 response.object.content[key].showpic = res.object;
                    //                 _this.tableData.push(response.object.content[key]);
                    //             }else{
                    //                 this.$message.error(res.message);
                    //             }
                    //         })
                    //     }else{
                    //         response.object.content[key].showpic = '';
                    //         _this.tableData.push(response.object.content[key]);
                    //     }
                    // }
                }else{
                    this.$message.error(response.message);
                }
            })
        },
        //添加
        addClick(){
            this.$router.push({path:'/product/product/edit',query: { type: 0}})
        },
        //排序
        sortClick(row){
            this.nowId = row.id;
            this.dataForm.sort = row.sort;
            this.showDialog = true;
        },
        sortSubmit(formName){
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    sortProduct(_this.nowId, _this.dataForm.sort).then(response => {
                        if(response.code == 200){
                            this.$message.success(response.message);
                            _this.init();
                            _this.showDialog = false;
                        }else{
                            this.$message.error(response.message);
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //上下架
        upDownClick(row){
            let usingStatus,isUsing;
            if(row.upDownStatus == 1){  //上架状态
                usingStatus = 0;
                isUsing = '下架';
            }else{
                usingStatus = 1;
                isUsing = '上架';
            }

            let _this = this;
            this.$confirm('确定修改状态为 '+ isUsing +' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //上下架
                upDownProduct(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //删
        delClick(row){
            let _this = this;
            this.$confirm('确定删除 '+row.name+' 吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //删除
                delProduct(row.id).then(response => {
                    if(response.code == 200){
                        this.$message.success(response.message);
                        _this.init();
                    }else{
                        this.$message.error(response.message);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });          
            });
        },
        //编辑
        editClick(row){
            this.$router.push({path:'/product/product/edit',query: { type: 1, id: row.id}})
        },
        //取消
        cancelClick(formName){
            this.showDialog = false;
            this.$refs[formName].resetFields();
        },
        //放大图片
        enlargeFun(pic){
            this.showPicDialog = true;
            this.nowPic = pic;
        },
        //分页
        getList(val) {
            this.nowPage = val - 1;
            this.init();
        },
        purchasableFun(row){
            if(row.purchasable == 1){
                return '可购买'
            }else if(row.purchasable == 0){
                return '不可购买'
            }
        },
        upDownStatusFun(row){
            if(row.upDownStatus == 1){
                return '上架'
            }else{
                return '下架'
            }
        },
        combinedFun(row){
            if(row.combined == 0){
                return '是'
            }else if(row.combined == 1){
                return '否'
            }
        },
        //所属分类
        productCategoryFun(row){
            let arr = [];
            if(row.productCategoryEntityList){
                for(let i=0;i<row.productCategoryEntityList.length;i++){
                    arr.push(row.productCategoryEntityList[i].name);
                }
            }
            return arr
        },
    },
    mounted(){
        this.init()
    }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>